<template>
    <div class="flex-1 flex flex-col backdrop-blur-sm bg-white/80 w-full rounded-2xl pl-3 pr-5 py-3 overflow-hidden">
        <!-- 搜索框 -->
        <div class="flex items-center h-9 w-fit mr-2 transition-all bg-black/4 rounded-2xl focus-within:bg-black/5 hover:bg-black/5 shrink">
            <!-- 搜索图标：绝对定位 字体20px 点击穿透 左外边距12px 过渡动画 垂直居中 黑色30%透明度 深色模式白色30%透明度 -->
            <SvgIcon name="search" class="absolute w-5 h-5 text-xl pointer-events-none ml-3 
                    transition text-black/30"></SvgIcon>
            <!-- 输入框：过渡动画 左内边距40px 小号字体 透明背景 无轮廓 全高度 宽度160px 激活/聚焦时宽度240px 黑色50%透明度 深色模式白色50%透明度 -->
            <input class="transition-all pl-10 text-sm bg-transparent outline-0 h-full w-30 active:w-40 focus:w-40
                     text-black/50" 
                    placeholder="搜索">
        </div>

        <!-- 角色列表和角色详情展示 -->
        <div class="flex flex-1 my-3 gap-5">
            <!-- 角色列表骨架屏 -->
            <div v-if="roleListSkeleton" class="flex-1 flex flex-col gap-5 overflow-y-auto">
                <Skeleton class="w-full h-30 bg-black/10 rounded-2xl" />
                <Skeleton class="w-full h-30 bg-black/10 rounded-2xl" />
                <Skeleton class="w-full h-30 bg-black/10 rounded-2xl" />
                <Skeleton class="w-full h-30 bg-black/10 rounded-2xl" />
            </div>
            <!-- 角色列表 -->
            <div v-else class="flex-1 flex flex-col gap-5 overflow-y-auto"
                ref="roleListContainer">
                <!-- 角色卡片 -->
                <RoleCard v-for="(role, index) in roleList" :key="index"
                          :nickname="role.nickname"
                          :avatar="role.avatar"
                          :introduction="role.introduction"
                          :capabilityLabels="role.capabilityLabels"
                          @click="selectRole(role)"
                          :style="role.id === selectedRole?.id ? { backgroundColor: '#E6F0FF' } : null">
                </RoleCard>
            </div>

            <!-- 角色详情展示 -->
            <div class="flex flex-col">
                <!-- 角色 1:1 形象展示、角色头像和角色的初次开场白渲染 -->
                <div v-if="selectedRole" class="relative cursor-default">
                    <!-- 角色 1:1 形象展示 -->
                    <img :src="selectedRole.fullBodyImage"
                        class="w-80 h-80 object-cover bg-white rounded-2xl"/>

                    <!-- 角色头像和角色的初次开场白 -->
                    <div class="absolute flex bottom-0 bg-[#FFF8FA]/80 rounded-xl px-2 py-3 items-center mx-2 mb-2">
                        <!-- 角色头像 -->
                        <img :src="selectedRole.avatar"
                            class="w-12 h-12 rounded-full mr-3" />

                        <!--角色名称和角色的初次开场白 -->
                        <div class="flex flex-col">
                            <div>{{ selectedRole.nickname }}</div>
                            <div class="text-xs">{{ selectedRole.greetingText }}</div>
                        </div>
                    </div>
                </div>

                <!-- 无选中角色时的提示 -->
                <div v-else class="w-80 h-80 bg-white rounded-2xl flex items-center justify-center font-bold">
                        选择想要聊天的角色吧~~
                </div>

                <!-- 聊天按钮 -->
                <button class="flex items-center justify-center rounded-full bg-[#ABDFFF] text-[#3F4ED4] py-1.5 mt-3 cursor-pointer
                        hover:bg-[#C6E7FF] transition-colors
                        disabled:opacity-50
                        disabled:cursor-not-allowed"
                        :disabled="selectedRole === null"
                        @click="jumpToRoleChat(selectedRole.id)">
                    <SvgIcon name="message" class="w-5 h-5"></SvgIcon>
                    <p class="ml-2">开始聊天</p>
                </button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { findRoleList, newRoleChat } from '@/api/role'
import RoleCard from '@/components/ai/RoleCard.vue'
import Skeleton from '@/components/common/Skeleton.vue'
import SvgIcon from '@/components/common/SvgIcon.vue'
import { ref, onBeforeUnmount, onMounted } from 'vue'
import { useHistoryChatsStore } from '@/stores/historyChatsStore'
import { useRouter } from 'vue-router'

const router = useRouter()

// 获取历史消息列表 Store
const historyChatsStore = useHistoryChatsStore()

// 能力标签色彩的最大值
const maxColor = 360
// 页码
const current = ref(1)
// 每页展示数据量
const size = ref(10)
// 角色列表
const roleList = ref([])
// 是否还有下一页数据（默认有）
const hasMore = ref(true)
// 是否正在加载中 (解决并发请求后续页数据问题)
const isLoadingMore = ref(false)
// 角色列表容器
const roleListContainer = ref(null)
// 选中的角色信息
const selectedRole = ref(null)
// 角色列表骨架屏控制
const roleListSkeleton = ref(true)

// 获取角色列表
const findRolePageList = async () => {
    // 处于加载中状态则不进行后续操作
    isLoadingMore.value = true

    await findRoleList(current.value, size.value).then(res => {
        if (res.data.success) {
            // 判断是否还有下一页数据
            hasMore.value = res.data.pages > current.value
            // 获取角色列表数据
            const data = res.data.data
            if (data && data.length > 0) {
                // 先对获取的角色列表数据的能力标签进行颜色处理
                data.forEach(role => {
                    // 如果该角色有对应的能力标签则进行颜色处理
                    if (role.capabilityLabels && role.capabilityLabels.length > 0)  {
                        // 获取能力标签数量
                        const length = role.capabilityLabels.length;
                        // 能力标签颜色起始值
                        let start = 0
                        // 获取能力标签颜色自增值
                        const add = Math.floor(maxColor / length)
                        // 循环处理能力标签颜色
                        role.capabilityLabels = role.capabilityLabels.map(label => {
                            // 添加颜色
                            label = {
                                ...label,
                                color: `oklch(0.80 0.10 ${start} / 0.25)`
                            }

                            // 颜色自增
                            start += add
                            return label
                        })
                    }
                })
            }

            // 将数据添加到列表尾部中
            roleList.value = [...roleList.value, ...data]

            console.log('=== 获取角色列表成功 ===')
            console.log(roleList.value)

            // 首次数据返回后，隐藏骨架屏
            roleListSkeleton.value = false
        }
    })

    // 关闭加载中的状态
    isLoadingMore.value = false
}

// 加载更多角色列表
const loadMoreRoleList = async () => {
    // 如果没有更多数据则不进行后续操作
    if(!hasMore.value) {
        return
    }
    // 处于加载中状态则不进行后续操作
    if (isLoadingMore.value) {
        return
    }

    // 计算下一页页码（向上滑动加载更早的历史消息，页码应该增加）
    const nextPageNo = current.value + 1
    // 保存当前页码用于错误恢复
    const currentTemp = current.value
    // 当前需要请求的页码
    current.value = nextPageNo

    try {
        findRolePageList()
    } catch (error) {
        // 恢复当前页码
        current.value = currentTemp
    }
}
// 监听角色列表容器的滚动事件
const handleScroll = () => {
    if (roleListContainer.value) {
        const container = roleListContainer.value
        // 到滚动区域底部的距离
        const scrollBootom = Math.abs(container.scrollTop + container.clientHeight - container.scrollHeight)

        // 打印滚动过程中的详细日志
        console.log('=== 滚动事件日志 ===')
        console.log('scrollBootom:', scrollBootom)
        console.log('isLoadingMore:', isLoadingMore.value)
        console.log('hasMore:', hasMore.value)
                
        // 当用户向上滚动到顶部附近时，且有更多数据，且当前没有在加载中时，才加载更多历史消息
        if (scrollBootom <= 1000 && hasMore.value && !isLoadingMore.value) {
            console.log('=== 触发加载更多角色列表 ===');
            loadMoreRoleList();
        }
    }
}

// 选择角色
const selectRole = (role) => {
    selectedRole.value = role
}

onMounted(() => {
    // 获取角色列表
    findRolePageList()

    // 为角色列表容器添加滚动事件监听器
    if (roleListContainer.value) {
        // 添加监听事件
        roleListContainer.value.addEventListener('scroll', handleScroll);
    }
})

// 组件卸载时自动关闭连接
onBeforeUnmount(() => {
  // 移除滚动事件监听
  if (roleListContainer.value) {
    roleListContainer.value.removeEventListener('scroll', handleScroll);
  }
})

// 跳转到角色聊天界面
function jumpToRoleChat(roleId) {
    newRoleChat(roleId).then(res => {
        if (res.data.success) {
            // 判断这次创建角色对话在之前是否有聊过
            const data = res.data.data
            // 如果返回的数据包含了角色信息，说明用户在这之前没有与该角色对话过，则对历史对话消息进行添加
            if (data.roleId && data.roleAvatar && data.summary) {
                historyChatsStore.addChatHistoryMessage(data)
            }

            // 跳转到对应的角色聊天界面
            router.push({ name: 'RoleChat', params: { chatId: data.uuid }, query: { roleId } });
        }
    })
}
</script>
